{% extends "base.html" %}

{% block title %}申请选择教练 - {{ coach.real_name }} - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    .apply-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 30px;
    }

    .coach-info-summary {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 30px;
    }

    .coach-avatar-md {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(255,255,255,0.3);
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    .coach-level-badge {
        font-size: 0.8rem;
        padding: 3px 10px;
        border-radius: 15px;
    }

    .level-senior { background: linear-gradient(45deg, #ffd700, #ff8c00); color: white; }
    .level-middle { background: linear-gradient(45deg, #c0c0c0, #808080); color: white; }
    .level-junior { background: linear-gradient(45deg, #cd7f32, #8b4513); color: white; }

    .apply-form {
        background: white;
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .form-section {
        margin-bottom: 30px;
        padding-bottom: 25px;
        border-bottom: 1px solid #eee;
    }

    .form-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .section-title {
        color: #333;
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 10px;
        color: #007bff;
    }

    .form-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
    }

    .form-control {
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 12px 15px;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .coach-quick-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .quick-info-item {
        margin-bottom: 10px;
    }

    .quick-info-item:last-child {
        margin-bottom: 0;
    }

    .quick-info-label {
        font-weight: 600;
        color: #666;
        display: inline-block;
        width: 80px;
    }

    .quick-info-value {
        color: #333;
    }

    .btn-submit-apply {
        background: linear-gradient(45deg, #28a745, #20c997);
        border: none;
        border-radius: 25px;
        padding: 15px 40px;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .btn-submit-apply:hover {
        background: linear-gradient(45deg, #218838, #1ea085);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-cancel {
        background: #6c757d;
        border: none;
        border-radius: 25px;
        padding: 15px 30px;
        color: white;
        font-size: 1.1rem;
    }

    .btn-cancel:hover {
        background: #545b62;
        color: white;
    }

    .apply-tips {
        background: #e7f3ff;
        border: 1px solid #b3d7ff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .apply-tips h6 {
        color: #0066cc;
        margin-bottom: 10px;
    }

    .apply-tips ul {
        margin-bottom: 0;
        padding-left: 20px;
    }

    .apply-tips li {
        color: #333;
        margin-bottom: 5px;
    }

    .char-counter {
        font-size: 0.85rem;
        color: #666;
        text-align: right;
        margin-top: 5px;
    }

    .back-link {
        color: white;
        text-decoration: none;
        opacity: 0.9;
    }

    .back-link:hover {
        color: white;
        opacity: 1;
        text-decoration: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 申请页面头部 -->
    <div class="row">
        <div class="col-12">
            <div class="apply-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-2">申请选择教练</h2>
                        <p class="mb-0 fs-5">向 {{ coach.real_name }} 教练发送选择申请</p>
                    </div>
                    <div>
                        <a href="{{ url_for('student_coach.detail', coach_id=coach.id) }}" class="back-link">
                            <i class="fas fa-arrow-left me-2"></i>返回教练详情
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧 - 教练信息摘要 -->
        <div class="col-md-4">
            <div class="coach-info-summary">
                <div class="text-center mb-3">
                    <img src="{{ coach.photo_url or url_for('static', filename='images/default-avatar.svg') }}"
                         alt="{{ coach.real_name }}" class="coach-avatar-md">
                </div>

                <div class="text-center mb-3">
                    <h5 class="mb-2">
                        {{ coach.real_name }}
                        <span class="coach-level-badge level-{{ coach.coach_level }}">
                            {% if coach.coach_level == 'senior' %}高级{% elif coach.coach_level == 'middle' %}中级{% else %}初级{% endif %}
                        </span>
                    </h5>
                    <p class="text-muted mb-0">
                        {{ '男教练' if coach.gender == 'male' else '女教练' }}
                        {% if coach.age %}・{{ coach.age }}岁{% endif %}
                    </p>
                </div>

                <div class="coach-quick-info">
                    <div class="quick-info-item">
                        <span class="quick-info-label">课时费：</span>
                        <span class="quick-info-value fw-bold text-success">￥{{ coach.hourly_rate or 0 }}/课时</span>
                    </div>
                    <div class="quick-info-item">
                        <span class="quick-info-label">学员数：</span>
                        <span class="quick-info-value">{{ detail.student_count if detail else 0 }}名</span>
                    </div>
                    <div class="quick-info-item">
                        <span class="quick-info-label">教龄：</span>
                        <span class="quick-info-value">
                            {% if coach.created_at %}
                                资深教练
                            {% else %}
                                新教练
                            {% endif %}
                        </span>
                    </div>
                    <div class="quick-info-item">
                        <span class="quick-info-label">评分：</span>
                        <span class="quick-info-value">
                            <span class="text-warning">★★★★☆</span> 4.0
                        </span>
                    </div>
                </div>

                {% if coach.bio %}
                <div class="mt-3">
                    <h6 class="text-muted">教练简介</h6>
                    <p class="mb-0" style="font-size: 0.9rem;">{{ coach.bio }}</p>
                </div>
                {% endif %}
            </div>

            <!-- 申请提示 -->
            <div class="apply-tips">
                <h6><i class="fas fa-lightbulb me-2"></i>申请提示</h6>
                <ul>
                    <li>详细说明您的乒乓球基础和学习目标</li>
                    <li>介绍您的训练时间安排和频率偏好</li>
                    <li>说明您希望重点提升的技术方面</li>
                    <li>真诚的申请说明有助于提高通过率</li>
                    <li>每位学员最多可选择2位教练</li>
                </ul>
            </div>
        </div>

        <!-- 右侧 - 申请表单 -->
        <div class="col-md-8">
            <div class="apply-form">
                <form method="POST" id="applyForm">
                    <!-- 申请说明 -->
                    <div class="form-section">
                        <div class="section-title">
                            <i class="fas fa-edit"></i>申请说明
                        </div>

                        <div class="mb-3">
                            <label for="apply_note" class="form-label">向教练介绍自己 <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="apply_note" name="apply_note" rows="8"
                                    placeholder="请介绍您的乒乓球基础、学习目标、训练时间安排等，让教练更好地了解您...&#10;&#10;例如：&#10;我是乒乓球初学者，希望从基础动作开始学习。平时工作比较忙，主要在周末有时间训练，希望能系统地学习正手攻球和反手推挡技术。我对乒乓球很有兴趣，希望能通过学习提高技术水平，也希望通过运动保持身体健康。"
                                    maxlength="500" required></textarea>
                            <div class="char-counter">
                                <span id="charCount">0</span>/500字
                            </div>
                        </div>
                    </div>

                    <!-- 个人信息确认 -->
                    <div class="form-section">
                        <div class="section-title">
                            <i class="fas fa-user"></i>个人信息确认
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">姓名</label>
                                    <input type="text" class="form-control" value="{{ current_user.real_name }}" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">性别</label>
                                    <input type="text" class="form-control"
                                           value="{{ '男' if current_user.gender == 'male' else '女' }}" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">年龄</label>
                                    <input type="text" class="form-control"
                                           value="{{ current_user.age or '未填写' }}" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">联系电话</label>
                                    <input type="text" class="form-control"
                                           value="{{ current_user.phone or '未填写' }}" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="mb-0">
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                教练可以看到您的基本信息，如需修改请前往
                                <a href="{{ url_for('profile.edit') }}" target="_blank">个人资料</a> 页面。
                            </small>
                        </div>
                    </div>

                    <!-- 申请须知 -->
                    <div class="form-section">
                        <div class="section-title">
                            <i class="fas fa-exclamation-triangle"></i>申请须知
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="agree_terms" required>
                                <label class="form-check-label" for="agree_terms">
                                    我已阅读并同意以下条款：
                                </label>
                            </div>
                        </div>

                        <div class="mb-0" style="font-size: 0.9rem; color: #666;">
                            <ul class="mb-0">
                                <li>申请提交后不可撤销，教练有权决定是否接受申请</li>
                                <li>每位学员最多可选择2位教练，超出限制将无法申请</li>
                                <li>申请通过后，需按照教练要求参与训练和课程</li>
                                <li>如有任何问题或争议，请联系校区管理员处理</li>
                                <li>虚假信息或恶意申请将被取消资格</li>
                            </ul>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="text-center">
                        <button type="submit" class="btn btn-submit-apply me-3" id="submitBtn">
                            <i class="fas fa-paper-plane me-2"></i>提交申请
                        </button>
                        <a href="{{ url_for('student_coach.detail', coach_id=coach.id) }}" class="btn btn-cancel">
                            <i class="fas fa-times me-2"></i>取消申请
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 字符计数器
    const $textarea = $('#apply_note');
    const $charCount = $('#charCount');
    const maxLength = 500;

    $textarea.on('input', function() {
        const currentLength = $(this).val().length;
        $charCount.text(currentLength);

        if (currentLength > maxLength * 0.9) {
            $charCount.addClass('text-warning');
        } else {
            $charCount.removeClass('text-warning');
        }

        if (currentLength >= maxLength) {
            $charCount.addClass('text-danger').removeClass('text-warning');
        } else {
            $charCount.removeClass('text-danger');
        }
    });

    // 表单验证
    $('#applyForm').on('submit', function(e) {
        const applyNote = $textarea.val().trim();
        const agreeTerms = $('#agree_terms').is(':checked');

        if (applyNote.length < 20) {
            e.preventDefault();
            showAlert('申请说明至少需要20个字符，请详细介绍您的情况', 'warning');
            $textarea.focus();
            return false;
        }

        if (!agreeTerms) {
            e.preventDefault();
            showAlert('请先阅读并同意申请须知', 'warning');
            $('#agree_terms').focus();
            return false;
        }

        // 提交时禁用按钮防止重复提交
        $('#submitBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>提交中...');
    });

    // 自动保存草稿
    let saveTimeout;
    $textarea.on('input', function() {
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(function() {
            const content = $textarea.val();
            if (content.length > 10) {
                localStorage.setItem('apply_draft_{{ coach.id }}', content);
                showTip('草稿已自动保存');
            }
        }, 2000);
    });

    // 恢复草稿
    const savedDraft = localStorage.getItem('apply_draft_{{ coach.id }}');
    if (savedDraft && savedDraft.length > 10) {
        if (confirm('检测到未完成的申请草稿，是否恢复？')) {
            $textarea.val(savedDraft);
            $textarea.trigger('input');
        }
    }

    // 初始化字符计数
    $textarea.trigger('input');
});

function showAlert(message, type) {
    const alertClass = type === 'success' ? 'alert-success' :
                      type === 'warning' ? 'alert-warning' : 'alert-danger';

    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'times-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;

    $('body').prepend(alertHtml);

    setTimeout(function() {
        $('.alert').fadeOut();
    }, 5000);
}

function showTip(message) {
    const tipHtml = `
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1000;">
            <div class="toast show" role="alert">
                <div class="toast-body">
                    <i class="fas fa-save me-2"></i>${message}
                </div>
            </div>
        </div>
    `;

    $('body').append(tipHtml);

    setTimeout(function() {
        $('.toast').fadeOut(function() {
            $(this).parent().remove();
        });
    }, 2000);
}
</script>
{% endblock %}